<template>
  <div class="moreAccountCont">
    <div class="autobox scrollbar mb">
      <template v-for="(item, index) in Object.keys(accounts)">
        <div :key="index">
          <div class="mb">
            <div class="chainList flex">
              <img :src="`/static/img/chain/${item.toUpperCase()}.png?v=1.0.2`" alt="" style="margin-right: 2px;">
              <span>{{item.toUpperCase()}}</span>
            </div>
            <div class="accountList mb flexb" v-for="(user, i) in accounts[item]" :key="i">
              <div class="flex">
                <img :src="handleGetVipLogo(user.level || 0)" alt="" class="mr5">
                <span @click="handleUserChecked(user)">{{user.name}}</span>
                <span v-if="index === 0 && i === 0" class="iconfont icon-you2 ml5"
                style="color: #278EDA"></span>
              </div>
              <!-- 退出 -->
              <div class="accountClose" @click="handleLoginOut(user)">{{ $t('qh.qh1') }}</div>
            </div>
          </div>
        </div>
      </template>
    </div>
    <div class="mt pt pl pr">
      <!-- 登录新账户 -->
      <el-button type="primary" style="width: 100%;" @click="handleLogin">
        {{ $t('qh.qh2') }}
      </el-button>
      <!-- 一键退出 -->
      <div class="center mt">
        <a @click="handleLoginOutAll">{{ $t('qh.qh3') }}</a>
      </div>
      <!-- 仅叶子钱包支持多账户登录 -->
      <p class="tip flexb mt">
        <img src="/static/img/wallet/plug/leaf.png" alt="">
        <span>
          {{ $t('qh.qh4') }}
        </span>
      </p>
    </div>
  </div>
</template>

<script>
import { EosModel } from '@/utils/eos/index';
import { vipLogo } from '@/utils/wallet';

export default {
  name: 'moreAccount', // 多账户
  data() {
    return {
      accounts: [],
    }
  },
  components: {},
  props: {
    moreAccountVisible: Boolean
  },
  watch: {
    moreAccountVisible: function change(val) {
      if (val) {
        this.handleFilerAccounts();
      }
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.handleFilerAccounts()
  },
  beforeDestroy() {},
  methods: {
    // 账户各式化
    handleFilerAccounts() {
      const scat = this.$store.state.app.scatter;
      if (scat && scat.identity) {
        const items = scat.identity.accounts;
        const chains = items.map(v => v.chain);
        const users = [];
        chains.forEach((v) => {
          users[v] = items.filter(vv => vv.chain === v);
        });
        this.accounts = users;
        return;
      }
      this.accounts = [];
    },
    // 选择已登录账户
    handleUserChecked(user) {
      const scat = this.$store.state.app.scatter;
      if (user.name === scat.identity.accounts[0].name
      && user.chain === scat.identity.accounts[0].chain) return;
      // 账户更新
      EosModel.moreAccountChange(user, () => {
        this.handleFilerAccounts();
        this.$emit('listenMoreAccount', 'close');
      })
    },
    // 登录
    handleLogin() {
      // 其他钱包切换账户操作
      this.$emit('listenWalletLogin', true, 'more');
    },
    // 单账号退出
    handleLoginOut(user) {
      EosModel.scatter.forgetIdentity({ account: user.name }).then(() => {
        // 账户移除
        EosModel.moreAccountOut(user, () => {
          this.handleFilerAccounts();
          this.$emit('listenMoreAccount', 'close');
        })
      });
    },
    // 所有账号退出
    handleLoginOutAll() {
      this.$emit('listenMoreAccount', 'LoginOutAll');
    },
    // 获取VIP - Logo
    handleGetVipLogo(level) {
      const l = level.toString();
      return vipLogo(l)
    },
  },
}
</script>
<style lang="scss" scoped>
@import "@/assets/css/variables.scss";
.moreAccountCont {
  .autobox {
    max-height: 380px;
    padding: 0 15px;
    overflow: auto;
  }

  .chainList {
    padding: 5px 0;

    img {
      width: 20px;
    }
  }

  .accountList {
    padding: 14px 12px;
    background: #F7F8FB;
    border-radius: 5px;

    .accountClose {
      font-size: 12px;
    }

    .flex span:hover, .accountClose:hover {
      color: #79A9EC;
      cursor: pointer;
    }
  }

  .tip {
    font-size: 12px;
    color: #999;

    img {
      width: 24px;
    }
  }
}

.theme-1B1D27 {
  .accountList {
    background: $-black2 !important;
  }

  .chainList {
    img {
      margin-right: 5px !important;
      background: #fff;
      border-radius: 50%;
    }
  }
}
</style>
